<template>
  <div class="form-item">
    <template v-if="modelValue.field_type == 1">
      <el-input v-model="modelValue.value" @change="handleChange" :placeholder="modelValue.name" clearable />
    </template>
    <template v-else-if="modelValue.field_type == 2">
      <el-input-number v-model="modelValue.value" @change="handleChange" :placeholder="modelValue.name" style="min-width: 180px;" clearable />
    </template>
    <template v-else-if="modelValue.field_type == 3">
      <el-switch v-model="modelValue.value" @change="handleChange" :active-text="modelValue.active_text" :inactive-text="modelValue.inactive_text"
          inline-prompt :active-value="modelValue.active" :inactive-value="modelValue.inactive" />
    </template>
    <template v-else-if="modelValue.field_type == 4">
      <el-radio-group v-model="modelValue.value" @change="handleChange">
        <el-radio v-for="option in modelValue.options" :value="option.value">{{ option.name }}</el-radio>
      </el-radio-group>
    </template>
    <template v-else-if="modelValue.field_type == 5">
      <el-checkbox-group v-model="modelValue.value" @change="handleChange">
        <el-checkbox v-for="option in modelValue.options" :label="option.name" :value="option.value" />
      </el-checkbox-group>
    </template>
    <template v-else-if="modelValue.field_type == 6">
      <el-select v-model="modelValue.value" @change="handleChange" :placeholder="modelValue.name">
        <el-option v-for="option in modelValue.options" :key="option.value" :label="option.name" :value="option.value" />
      </el-select>
    </template>
    <template v-else-if="modelValue.field_type == 7">
      <el-tree-select
          v-model="modelValue.value"
          :data="modelValue.treeData"
          :props="{ label: modelValue.label, value: modelValue.key }"
          :default-expanded-keys="[modelValue.value]"
          :check-strictly="true"
          :value-key="modelValue.key"
          :node-key="modelValue.key"
          @change="handleChange"
          filterable
          clearable
      />
    </template>
    <template v-else-if="modelValue.field_type == 8">
      <el-input type="textarea" v-model="modelValue.value" :rows="3" :maxlength="255" @change="handleChange" :placeholder="modelValue.name" />
    </template>
    <template v-else-if="modelValue.field_type == 9">
      <UploadImg v-model:imageUrl="modelValue.value" @update:imageUrl="handleChange" width="80px" height="80px" :file-size="3">
        <template #empty>
          <el-icon><Plus /></el-icon>
          <span>请上传图片</span>
        </template>
        <template #tip> 图片大小不能超过 3M </template>
      </UploadImg>
    </template>
    <template v-else>
      <el-input v-model="modelValue.value" @change="handleChange" :placeholder="modelValue.name" clearable />
    </template>
  </div>
</template>

<script setup lang="ts">
import { PropType } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { ElTreeSelect } from "element-plus";
import UploadImg from "@/components/Upload/Img.vue";

const props = defineProps({
  "modelValue": {
    type: Object as PropType<any>,
    default: {}
  },
});

const emits = defineEmits(['update:modelValue']);
const handleChange = () => {
  console.log(props.modelValue);
  emits('update:modelValue', props.modelValue);
}
</script>

<style scoped lang="scss">
.form-item {
  width: 100%;
}
</style>